@import "../constants";

.header {
  background-image: url("./images/header-background.png");
  background-size: cover;
  background-position: center top;
}

.header-container {
  padding-top: 20px;
  padding-bottom: 20px;

  @media (min-width: 640px) {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.opened {
  right: auto;
}

.links {
  padding-right: $inner-offset;
  a {
    display: inline-block; // prevent margins collapsing
    margin: 0 15px;
    color: rgba(255, 255, 255, 255);
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

.menu-sandwich {
  display: block;
  background: url(../pages/images/icon-sandwich.svg) no-repeat 0 0;
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  &.clicked {
    background: url(../pages/images/icon-close.svg) no-repeat 0 0;
    position: fixed;
    z-index: 9999;
    top: 35px;
    right: 0;
  }
  &:focus {
    outline: none;
  }

  @media (min-width: 731px) {
    display: none;
  }
}

@media(max-width: 730px) {
  .links {
    transition: right .1s linear;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #093643;
    z-index: 999;
    padding: 30px 20px;

    &.opened {
      right: 0;
    }
    a {
      display: inline;
      font-size: 24px;
      margin: 0;
      &:after {
        content: '';
        display: block;
        margin-bottom: 25px;
      }
    }
  }
}

@media (min-width: 800px) {
  .header.productPage {
    padding-bottom: 25px;
  }
}
